<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>飞机游戏</title>
		<script>
		//开始游戏
		//var top=570;
		function startGame(){
			//window.onkeydown=function(e){
				//alert(e.keyCode);
			//}
			
			var tip=document.getElementById("tip");
			tip.style.display="none";
			makePlane();
			makeBullet();
			makeDiji();	
			//isShoot();
		}
		
		function getRect(obj){
			return obj.getBoundingClientRect();
		}
		//判断子弹是否命中敌机
		function isShoot(){
			var b=document.getElementById("bullet");
			var diji=document.getElementById("diji1");
			var bullet=getRect(b);
			var diji1=getRect(diji);
			if(diji1.left<bullet.right||diji1.right>bullet.left||diji1.top<bullet.bottom||diji1.bottom>bullet.top){
				alert("击中了敌机1");
			}
		}
		//产生子弹
		
		function makeBullet(){
			var top=570;
			var bulletBox=document.getElementById("bulletBox");
			bulletBox.innerHTML="<div class='bullet' id='bullet'></div>";	
		}
		function hongge(){
			var dijiBox=document.getElementById("dijiBox");
			for(var i=0;i<=15;i++){
				dijiBox.innerHTML+='<div id="'+i+'"><img src="img/2.png" name="diji" style="margin-left: 0px;margin-top: 0px;"/></div>'
			}
		}
		//产生敌机
		function makeDiji(){
			var dijiBox=document.getElementById("dijiBox");
			dijiBox.style.display="block";
			dijiBox.style.marginTop=200*Math.random()+"px";
			dijiBox.style.marginLeft=113*Math.random()+"px";
			setTimeout("makeDiji()",1000);
		}
		//产生飞机,控制飞机移动
		function makePlane(){
			var p=196;//planeBox的左边距200px
			var q=600;//plane的上边距
			var top=570;
			var planeBox=document.getElementById("planeBox");
			var plane=document.getElementById("plane");
			//var bullet=document.getElementById("bullet");
			planeBox.style.display="block";
			
			window.onkeydown=function(e){
				//飞机向左移动
				if(e.keyCode==65){
					if(p>0){
						//为0不能再向左移动
						p-=28;
						planeBox.style.marginLeft=p+"px";
					}
				}
				//飞机向右移动
				if(e.keyCode==68){
					if(p<440){
					p+=28;
					planeBox.style.marginLeft=p+"px";
					}
				}
				//飞机向上移动
				if(e.keyCode==87){
					if(q>0){
					q-=38;
					plane.style.marginTop=q+"px";
					}
				}
				//飞机向下移动
				if(e.keyCode==83){
					if(q<620){
					q+=38;
					plane.style.marginTop=q+"px";
					}
				}
				if(e.keyCode==73){
				var bullet=document.getElementById("bullet");
				if(top>0){
					bullet.style.marginTop=top+"px";
				}else{
					top=570;
				}
				top-=38;
				
			}
			//鼠标控制飞机移动
			//window.onmousemove=function(ev){		
				//plane.innerHTML=parseInt(ev.clientX)+"-"+parseInt(ev.clientY);
				//plane.innerHTML;
				//bullet.innerHTML;
				//if(ev.clientX>490&&ev.clientX<918){
					//planeBox.style.marginLeft=ev.clientX+"px";
					//planeBox.style.marginTop=ev.clientY+"px";
				//}
				}
			}
		</script>
		<style>
			.tip{
				
				position: absolute;
				margin-left: 160px;
				width: 200px;
				height: 60px;
			}
			.dijiBox{
				
				width:392px;
				height: 152px;
				position: absolute;
				z-index: 2;
			}
			.diji1{
				
				background-image:url(img/2.png);
				position: absolute;
				width: 56px;
				height:38px;
				z-index: 2;
			}	
			.planeBox{
				
				position: absolute;
				margin-left: 200px;
				width: 98px;
				height: 712px;
				z-index: 2;	
			}
			.plane{
				width: 98px;
				height: 112px;
				margin-top: 600px;
				z-index: 2;
			}
			.bulletBox{
				
				position: absolute;
				margin-left: 39px;
				margin-top: -750px;
				width: 20px;
				height: 638px;
				z-index: 2;
			}
			
			.bullet{
				
				background-image:url(img/10.png);
				width: 20px;
				height: 38px;
				margin-top: 570px;	
				z-index: 2;		
					}
			 .row{
			 		margin: auto;
			        width: 518px;
			        height: 627px;
			    }
			 .box{
			        position: absolute;
			    }
			 .box2{
			    	
			    	width:526px;
			       	height: 627px;
			        position: absolute;
			        
			    }
			 img{
			        float: left;
			    }
		</style>
	</head>
	<body>
		
		<div class="row" id="row" >
			
        	<div class="box" id="box" ">
	            <div class="box2" id="box2" >
	                <img src="img/9.png">
                    <img src="img/9.png">
               		<img src="img/9.png">
	                <img src="img/9.png">
	            </div>      
       		</div>
			<div class="planeBox" id="planeBox" style="display:none;" >	
				<div class="plane" id="plane"><img src="img/8.png" /></div>	
				<div class="bulletBox" id="bulletBox"></div>
			</div>
			<div class="dijiBox" id="dijiBox" style="display: none;">
				<div class="diji1" id="diji1" style="margin-top: 0px;margin-left: 0px;"></div>
				<div class="diji1" id="diji2" style="margin-top: 0px;margin-left: 84px;"></div>
				<div class="diji1" id="diji3" style="margin-top: 0px;margin-left: 168px;"></div>
				<div class="diji1" id="diji4" style="margin-top: 0px;margin-left: 252px;"></div>
				<div class="diji1" id="diji5" style="margin-top: 0px;margin-left: 336px;"></div>
				<div class="diji1" id="diji6" style="margin-top: 57px;margin-left: 0px;"></div>
				<div class="diji1" id="diji7" style="margin-top: 57px;margin-left:84px;"></div>
				<div class="diji1" id="diji8" style="margin-top: 57px;margin-left: 168px;"></div>
				<div class="diji1" id="diji9" style="margin-top: 57px;margin-left: 252px;"></div>
				<div class="diji1" id="diji10" style="margin-top:57px;margin-left: 336px;"></div>
				<div class="diji1" id="diji11" style="margin-top: 114px;margin-left: 0px;"></div>
				<div class="diji1" id="diji12" style="margin-top: 114px;margin-left: 84px;"></div>
				<div class="diji1" id="diji13" style="margin-top: 114px;margin-left: 168px;"></div>
				<div class="diji1" id="diji14" style="margin-top: 114px;margin-left: 252px;"></div>
				<div class="diji1" id="diji15" style="margin-top: 114px;margin-left: 336px;"></div>
				
			</div>
			<script>
				
				 //背景滚动
					//var box2 = document.getElementById("box2");
					var len = 0;
					var len1=0
					window.onload = move1;
					function move1(){
						//背景滚动
						len--;
						if(len ==-627){
							box2.style.bottom= len+"px";
							len = 0;
					   		 }
						box2.style.bottom = len+"px";
						window.setTimeout("move1()",10); 
					 }	 		  
			</script>
			<div class="tip" style="display: block" id="tip">
			<font color="#000000" size="4">
				WASD控制飞机移动<br />
				I键控制子弹发射
			</font>	
		</div>
			</div>
  		<div id="start" style="margin-left: 390px;">
  			<a href="javascript:startGame()"><h2>开始游戏</h2></a>
  		</div> 		
	</body>
</html>
